<template>
	<view class="charts-box">
	   <qiun-data-charts 
	     type="radar"
	     :opts="opts"
	     :chartData="chartData"
	   />
	 </view>
</template>

<script>
	export default{
		data(){
			return{
				chartData: {},
				opts: {
				    padding: [5,5,5,5],
					color:['#6174FC'],
				    dataLabel: false,
				    legend: {
				        show: false,
				        position: "right",
				        lineHeight: 25
				    },
				    extra: {
				        radar: {
				            gridType: "radar",
				            gridColor: "#CCCCCC",
				            gridCount: 3,
				            opacity: 0.2,
				            max: 200,
				            border: true
				        }
				    }
				}
			}
		},
		props:{
			reward:{
				type:Array,
				require:true
			}
		},
		methods:{
			getServerData(rewardName,rewardValue) {
			      //模拟从服务器获取数据时的延时
			      setTimeout(() => {
			        //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			        let res = {
			            categories: rewardName,
			            series: [
			              {
			                name: "",
			                data: rewardValue
			              }
			            ]
			          };
			        this.chartData = JSON.parse(JSON.stringify(res));
			      }, 500);
			},
		},
		mounted() {
			console.log(this.reward,'123456')
			var rewardName = []
			var rewardValue = []
			this.reward.map((item,index)=>{
				rewardName.push(item.name)
				rewardValue.push(item.value)
			})
		    this.getServerData(rewardName,rewardValue);
		},
		watch:{
			reward(val){
				console.log(val,'父组件传递数据')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.charts-box {
		width: 100%;
		height: 400rpx;
	}
</style>